<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>
        个人信息完善
    </title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css" >
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/script/jquery-1.7.2.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-image: url("/static/img/背景.jpg");
        }
        img{
            width: 140px;
            margin-left: 80px;
            margin-top: 80px;
        }
        #d{
            /* border: 1px solid red; */
            position: relative;/* 相对于原始位置定位 */
            top:160px;
            left: 160px;
        }
        #sp1,#sp2,#sp3{
            color: white;
        }
        #sp1{
            font-size: 50px;
            font-weight: bold;
        }
        #sp2{
            font-size: 30px;
            font-weight: 100;
        }
        #sp3{
            font-size: 14px;
            font-weight: 100;
            margin-left: 80px;
            position: relative;
            top: 600px;
        }
        #db{
            width: 480px;
            height: 640px;
            position: absolute;
            top:70px;
            right: 140px;
            background: rgba(255, 255, 255,0.9);
            border-radius: 16px;/* 圆角 */
        }
        #d1{
            margin-top: 50px;
            margin-left: 30px;
        }
        .t{
            width: 300px;
            height: 40px;
            border-radius: 4px;
            outline: none;/* 去轮廓 */
            border: 0.5px gray solid;/* 加边框 */
            padding-left: 10px;
            margin-left: 5px;
        }
        .s{
            font-weight: 100;
            color: rgba(0, 0, 0, 0.8);/* 带透明度的三原色，透明度为0.8 */

        }
        #d2{
            margin-left: 30px;
            margin-top: 50px;
        }
        #b{
            height: 50px;
            width: 420px;
            background: #2E58FF;
            border-radius: 50px;
            outline: none;
            color: white;
            border: none;
            font-size: 16px;
            margin-left: 32px;
            margin-top: 30px;
            position: relative;
            bottom: 80px;
            right: 30px;
        }
        #sp{
            font-size: 12px;
        }
        #sp > a{
            text-decoration: none;
            color: #2E58FF;
        }
    </style>
    <script>
        const provinceList = [
            {
                label : "江苏",
                code : "0"
            },
            {
                label : "安徽",
                code : "1"
            },
            {
                label : "辽宁",
                code : "2"
            },
            {
                label : "广东",
                code : "3"
            },
        ]
        const cityList = {
            0 : [
                {
                    label : "南京",
                    code : "0"
                },
                {
                    label : "南通",
                    code : "1"
                },
                {
                    label : "无锡",
                    code : "2"
                },
                {
                    label : "苏州",
                    code : "3"
                }
            ],
            1 : [
                {
                    label : "合肥",
                    code : "0"
                },
                {
                    label : "无锡",
                    code : "1"
                },
                {
                    label : "安庆",
                    code : "2"
                },
                {
                    label : "马鞍山",
                    code : "3"
                }
            ],
            2 : [
                {
                    label : "沈阳",
                    code : "0"
                },
                {
                    label : "葫芦岛",
                    code : "1"
                },
                {
                    label : "大连",
                    code : "2"
                },
                {
                    label : "鞍山",
                    code : "3"
                },
                {
                    label : "盘锦",
                    code : "4"
                }
            ],
            3 : [
                {
                    label : "广州",
                    code : "0"
                },
                {
                    label : "深圳",
                    code : "1"
                },
                {
                    label : "东莞",
                    code : "2"
                },
                {
                    label : "汕头",
                    code : "3"
                },
                {
                    label : "佛山",
                    code : "4"
                }
            ],
        }
        onload = function(){
            var sel = document.getElementById("sel");
            var c = document.getElementById("c");
            sel.onchange = function(){
                // var cities = prov[sel.value];
                var cities = cityList[sel.value]
                c.innerHTML = "<option>---请选择省份---</option>;"
                for(var i in cities){
                    var city = cities[i];
                    var op = document.createElement("option");
                    op.value = city.code;
                    op.innerText = city.label;
                    c.appendChild(op);
                }
            }
        }
    </script>
    <script>
        $(function () {
            $("#b").click(function () {
                var flag = true;
                if ($("#name").val()==null||$("#phone").val()===""){
                    flag = false;
                    return;
                }
                if ($("#idcode").val()==null||$("#password").val()===""){
                    flag = false;
                    return;
                }
                if ($("#address").val()==null||$("#address").val()===""){
                    flag = false;
                    return;
                }
                if (flag){
                    //拿到单选框中的性别
                    let elementsByName=$("input[type='radio']:checked").val();
                    //拿到省份城市
                    const sel = document.querySelector("#sel");
                    var c = document.getElementById("c");
                    const currentProvince = provinceList.filter(v => v.code == sel.value)[0]
                    const currentCity = cityList[sel.value].filter( v => v.code == c.value)[0]
                    var nowCity = currentCity.label;
                    var nowProvince = currentProvince.label;
                    //拿到姓名
                    var name = $("#name").val();
                    //拿到地址
                    var address = $("#address").val();
                    //拿到身份证
                    var idcode = $("#idcode").val();
                    location.href = "${pageContext.request.contextPath}/userServlet?action=isFullUser&nowCity="+nowCity+"&gender="+elementsByName+"&nowProvince="+nowProvince+"&idcode="+idcode+"&name="+name+"&address="+address;
                }
            })
            $("#idcode").focus(function () {
                $("#idcode").css("border-color","blue");
                $(".errorMsg").text("");
                return false;
            })
            $("#idcode").blur(function () {
                $("#idcode").css("border-color","gray");
                var regExp = new RegExp("^\d{17}[\d|X]|\d{15}$");
                var value = $("#idcode").val();
                if (!regExp.test(value)){
                    $(".errorMsg").text("身份证号必须符合规则");
                }
            })
        })
    </script>
</head>
<body>
<div id="d">
    <span id="sp1">欢迎您来到网上银行</span>
</div>
<span id="sp3">帮助中心 丨 2022&nbsp;Bank</span><!-- 连续多个空格和回车会折叠，所以想要多个空格显示在页面要用&nbsp;为一个空格，多来几个即可 -->

<div id="db" >
    <div id="d1">
        <a href="/index.jsp">首页</a>&nbsp;&nbsp;<h2 style="position: relative; left: 120px;">个人信息完善</h2>
        <hr>
    </div>
    <div id = "d2">
        <span class="s">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</span><input id="name" class="t" type="text" name="name" <c:if test="${empty user.name}">value=""</c:if>  <c:if test="${not empty user.name}">value="${user.name}"</c:if>><br><br><br>
            <span class="s">身份证号：</span><input class="t" id="idcode" type="text" name="idcode"  <c:if test="${empty user.idCode}">value=""</c:if>  <c:if test="${not empty user.idCode}">value="${user.idCode}"</c:if>><br><br>
            <input type="radio" name="gender" value="男">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="gender" value="女">女<br><br>
            <span class="s">手机号：&nbsp;</span><input class="t" type="text" name="手机号" readonly value="${user.phone}"><br><br>
            <span class="s">选择省市：</span>
            <select id="sel">
                <option>---请选择省份---</option>
                <option value="0">江苏</option>
                <option value="1">安徽</option>
                <option value="2">辽宁</option>
                <option value="3">广东</option>
            </select>
            <select id = "c">
                <option>---请选择省份---</option>
            </select><br><br><br>
            <span class="s">详细地址：</span><input class="t" id="address" type="text" name="address" value="${user.address}">
            <div id="d3">
                <br><br><br>
                <button id="b">提交</button>
                <br><br>
            </div>
    </div>
</div>
</body>
</html>
